$white-two:#f4f4f4;
$pinkish-grey: #bdbdbd;
$white: #dcdcdc;
$clear-blue: #1a98ff;
$white-two-06: rgba(244, 244, 244, 0.6);
$pinkish-grey-two: #cbcbcb;
$tomato: #f12525;
$black : #333333;
$warm-grey: #999999;
$greyish:#acacac;

$header-background: rgb(40,48,62);

.main-container{
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .main-header{
        position: relative;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        background-color: $header-background;
    }
    .main-body{
        position: relative;
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        box-sizing: border-box;
        .main-content{
            position: relative;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            transition: width 0.5s ease-in-out;
        }
        .main-sidebar{
            position: relative;
            width: 0;
            height: 100%;
            box-shadow: 0 -1px 10px 0.5px #ffffff;
            box-sizing: border-box;
            background-color: $header-background;
            transition: width 0.5s ease-in-out;
        }
    }
    .app-setting{
        position: absolute;
        height: 700px;
        width: 600px;
        top: calc(50% - 350px);
        left: calc(50% - 300px);
        box-sizing: border-box;
    }
}


